<template>
  <transition name="search">
    <div class="search">
      <div class="g-header-container">
        <search-header  @queryText="query"></search-header>       <!--搜索框-->
      </div>
      <me-scroll>                                               <!--滚动条-->
        <hot-search></hot-search>                               <!--热门搜索-->
        <search-result :queryText="queryText"></search-result>  <!--搜索结果-->
        <search-history
          @showConfirm="showConfirm"
          ref="searchHistory">
        </search-history>                                       <!--历史搜索-->
      </me-scroll>
      <me-confirm
        ref="confirm"
        @yes="clear"
      >
      </me-confirm>
    </div>
  </transition>
</template>
<script>
import meConfirm from '@/base/me-confirm'
import searchHistory from './history-search'
import searchHeader from './search-header'
import hotSearch from './hot-search'
import searchResult from './search-result'
import meScroll from '@/base/me-scroll'
export default {
  name: 'search',
  components: {
    searchHistory,
    searchHeader,
    hotSearch,
    searchResult,
    meScroll,
    meConfirm
  },
  data () {
    return {
      queryText: ''
    }
  },
  methods: {
    query (value) { // 将搜索词传递给子组件（搜索结果）
      this.queryText = value
      // console.log(this.queryText)
    },
    showConfirm () {
      this.$refs.confirm.show()
    },
    clear () {
      this.$refs.searchHistory.clear()
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/stylus/mixin'
.search
  height 100%
  width 100%
  background-color #eee
  position absolute
  left 0
  right 0
  bottom 0
  top 0
  padding-top 50px
  z-index $search-z-index
.search-enter-active,.search-leave-active
  transition all 2s
.search-enter,.search-leave-to
  transform translate3d(100%,0,0)
</style>
